<style>
.login h2{
    padding: 10px 0;
    text-align: center;
    font-size: 20px;
    font-weight: normal;
}
.login p{
    padding-left: 100px;
    margin-top: 10px;
}
.login span{
    color: #31c27c;
    margin-right: 10px;
}
.login input[type=text], .login input[type=password]{
    padding: 5px;
    line-height: 1.2;
    border-radius: 3px;
    width: 160px;
    border: 1px solid #ccc;
    outline: none;
}
.login .btn-submit{
    border-radius: 3px;
    padding: 5px 10px;
    color: #666;
    border: 1px solid #31c27c;
    background: #fff;
    outline: none;
}
.login .btn-reset{
    border-radius: 3px;
    padding: 5px 10px;
    color: #666;
    border: 1px solid #31c27c;
    background: #fff;
    outline: none;
}
</style>
<template>
    <v-header>
    </v-header>
    <section class="content">
        <div class="login">
            <h2>登录</h2>
            <p><span>用户</span><input type="text" name="username" v-model="username" placeholder="please input your username"/></p>
            <p><span>密码</span><input type="password" name="password" v-model="password" placeholder="please input your password"/></p>
            <p><input type="button" class="btn-submit" value="确定" @click="submitLogin($event)"/></p>
            <p><input type="button" class="btn-reset" value="重置" @click="resetValue($event)"/></p>
        </div>
    </section>
    <v-footer>
    </v-footer>
</template>
<script>
    var header = require("../components/header.vue");
    var footer = require("../components/footer.vue");
    var $ = require("jquery");
    var loginService = require("../services/loginService.js")();
    module.exports = {
        data: function(){
            return {
                username : "",
                password : ""
            };
        },
        components: {
            "v-footer": footer,
            "v-header": header
        },
        methods: {
            submitLogin: function(event){
                var dfd = $.Deferred();
                var that = this;
                dfd.done(function(data) {
                    console.log(data);
                    that.$router.go("/main/fund_query");
                }).fail(function(code, msg){
                    alert(msg);
                });
                loginService.loginSubmit(this.username, this.password, dfd);
            },
            resetValue: function(event){
                this.username = "";
                this.password = "";
            }
        }
    }
</script>